import { useState } from 'react';
import { Helmet } from '@@/plugin-helmet/exports';
import { Card, Col, Row, Typography } from 'antd';
import { useModel } from '@@/plugin-model/useModel';
import { DownloadOutlined } from '@ant-design/icons';
import './Home.less';

export default () => {
  const { initialState } = useModel('@@initialState');
  const { settings } = initialState || {};
  // 这个 siteTitle 是在 defaultSettings.ts 中自定义配置的，没有提供类型，因此这个报了检查警告
  // @ts-ignore
  const siteTitle = settings?.siteTitle;
  const [colProps] = useState({
    span: 4,
    xs: 24,
    sm: 24,
    md: 12,
    lg: 6,
    xl: 4,
    style: { marginTop: 10 },
  });

  return (
    <>
      <Helmet>
        <title>{siteTitle}</title>
      </Helmet>
      <Row>
        <Col span={24}>
          <Typography.Title level={2}>2020 版简历</Typography.Title>
        </Col>
      </Row>
      <Row gutter={10}>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="./resume/2020/index.html" target="_blank">
              <Card.Meta title="智联招聘模板" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
        <Col {...colProps}>
          <Card
            hoverable
            bordered
            actions={[
              <a
                href="./resume/2020/qiaobu-full.pdf"
                title="下载PDF版"
                target="_blank"
                key="download"
              >
                <DownloadOutlined />
              </a>,
            ]}
          >
            <a href="./resume/2020/qiaobu-full.html" target="_blank">
              <Card.Meta title="乔布简历模板-完整版" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
        <Col {...colProps}>
          <Card
            hoverable
            bordered
            actions={[
              <a
                href="./resume/2020/qiaobu-simple.pdf"
                title="下载PDF版"
                target="_blank"
                key="download"
              >
                <DownloadOutlined />
              </a>,
            ]}
          >
            <a href="./resume/2020/qiaobu-simple.html" target="_blank">
              <Card.Meta title="乔布简历模板-删减版" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
      </Row>
      <Row style={{ marginTop: 20 }}>
        <Col {...colProps}>
          <Typography.Title level={2}>2018 版简历</Typography.Title>
        </Col>
      </Row>
      <Row gutter={10}>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="./resume/2018/index.html" target="_blank">
              <Card.Meta title="智联招聘模板" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="./resume/2018/lg.html" target="_blank">
              <Card.Meta title="拉勾简历模板" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="./resume/2018/qb.html" target="_blank">
              <Card.Meta title="乔布简历模板" description="侯坤林个人简历" />
            </a>
          </Card>
        </Col>
      </Row>
      <Row style={{ marginTop: 20 }}>
        <Col {...colProps}>
          <Typography.Title level={2}>相关链接</Typography.Title>
        </Col>
      </Row>
      <Row gutter={10}>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="//houkunlin.cn" target="_blank">
              <Card.Meta title="个人网站" description="//houkunlin.cn" />
            </a>
          </Card>
        </Col>
        <Col {...colProps}>
          <Card hoverable bordered>
            <a href="//houkunlin.github.io" target="_blank">
              <Card.Meta title="博客" description="Github Pages" />
            </a>
          </Card>
        </Col>
      </Row>
    </>
  );
};
